<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>五壮士车库</title>
  <script src="js/jquery-1.8.2.js"></script>
  <script src="layui/layui.js"></script>
  <link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body class="layui-layout-body"  style='background-color: black;'>

<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">五壮士车库</div>
<!-- 头部区域（可配合layui已有的水平导航） -->
 <ul class="layui-nav layui-layout-left" lay-filter="">
  <li class="layui-nav-item layui-this"><a href="lbt.html">首页</a></li>
  <li class="layui-nav-item "><a href="gywm.html">关于我们</a></li>
  <li class="layui-nav-item "><a href="car.html">产品</a></li>
  <li class="layui-nav-item"><a href="xw.html">新闻</a></li>
  <li class="layui-nav-item"><a href="lxwm.html">联系我们</a></li>
</ul>
 </div>
 
 <br>
 <br>
 <br>
 
 
 
<div class="layui-carousel" id="lbt"lay-filter="lbt">
  <div carousel-item id="box">
    
  </div>
</div>
</div>


<div id="lbtjs"></div>

<div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - 底部固定区域
</div>
<script>
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use('element', function(){
  var element = layui.element;
  
  //…
});
//轮播图
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  var ins=carousel.render({
    elem: '#lbt'
    ,width: '100%' //设置容器宽度
    ,height: '1000px'
    //,arrow: 'always' //始终显示箭头
    //,anim: 'updown' //切换动画方式
  });
  $.ajax({
		url : "/wzsck/lbtQueryServlet",//地址
		type : "get",//请求方式
		
			success : function(res) {//成功以后的回调函数							
				//for (var i=0;i<res.length;i++){
					var list= res.data;							
					//$("#box").html(gywm.description);
					for(var i=0;i<list.length;i++){
						$("#box").append("<div><img src ='"+"/wzsck/"+list[i].imgurl+"' ></div>");
					}
					//重置轮播
					ins.reload({
					    elem: '#lbt'
						    ,width: '100%' //设置容器宽度
						    //,arrow: 'always' //始终显示箭头
						    ,height: '1000px'
						    //,anim: 'updown' //切换动画方式
						  });

				//}
		}
		})
});
$.ajax({
	url : "/wzsck/lbtQueryServlet",//地址
	type : "get",//请求方式	
		success : function(res) {
				var list= res.data;	
				for(var i=0;i<list.length;i++){
				
					
							$("#lbtjs").append(
									"<div class='layui-row' style='color: greenyellow;'>"
									
									+" <div class='layui-col-xs6 layui-col-sm6 layui-col-md6'>"
									+"<div><img src ='"+"/wzsck/"+list[i].imgurl+"' width='700px'></div>"
									+"</div>"
									+" <div class='layui-col-xs6 layui-col-sm6 layui-col-md6' style='padding: 100px;'>"
									+"<h1>"+list[i].name+"</h1>"
									+"<h2>"+list[i].price+"元</h2>"
									+"<h3>"+list[i].describe+"</h3>"
									+"</div>"
									
									+"</div>"
									);
				
				}

			
	}
	})
</script>
</body>
</html>